<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" />
<style type="text/css">
/*弹出层的STYLE*/
.popdiv {
    background-color: white;
    text-align: center;
    line-height: 40px;
    z-index:99;
    width: 80%;
    position:fixed!important;
}

#divbg {
    background-color: #000000;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    filter:alpha(opacity=50);
    opacity:0.5;
    z-index:1;
    position:fixed!important;
}
.ticket_detail_name {
    display:inline-block;
    float:left;
    color:#000;
}
.ticket_detail_value {
    display:inline-block;
    color:#000;
}
/*The END*/
#main-top-right {
  background: none;
}
</style>
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
    <a href="${ctx}/trafficlinenc/index.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${ticketQueryParam.leaveDate}">
      <div id="main-top-left">
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">到${ticketQueryParam.destination }的省际班线</div>
    <a id="main-top-right" href="${ctx}/indexnc/index.do?ver=${appVer}">
      <img src="${ctx }/images/home_icon.png">
    </a>
  </header>
  <div id="container">
    <div id="container-date">
      <a href="${ctx}/trafficlinenc/enquiry.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${lastYMD}">
        <div id="container-date-back">
          <img src="${ctx}/images/hpe_title_back_btn.png" class="img-3">前一天
        </div>
      </a>
      <div id="container-date-select">${year }年${month }月${day }日 </div>
      <a href="${ctx}/trafficlinenc/enquiry.do?startCityId=${ticketQueryParam.startCityId}&starting=${ticketQueryParam.starting}&startStationId=${ticketQueryParam.startStationId}&arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${nextYMD}">
        <div id="container-date-next">
          后一天<img src="${ctx}/images/hpe_title_next_btn.png" class="img-3">
        </div>
      </a>
    </div>
    <div id="trains">
      <ul>
      <c:forEach var="trafficline" items="${trafficLineList }">
        <li leaveTime="${trafficline.leaveTime }" startStationName="${trafficline.startStationName }"  schType="${cf:schTypeName(trafficline.schType)}"
            price="${trafficline.price }" arriveStationName="${trafficline.arriveStationName }" surplusNum="${trafficline.surplusNum }" freeNum="${trafficline.freeNum }"
            busTypeName="${trafficline.busTypeName }" passStationName="${trafficline.passStationName }" endStationName="${trafficline.endStationName }"
            <c:if test="${trafficline.schType == constant.schType_fixed && trafficline.surplusNum == '0' }">style="background-color:rgb(239, 238, 238)"</c:if>>
          <form action="${ctx}/order/confirm.do" method="get">
            <div class="time">${trafficline.leaveTime }<c:if test="${trafficline.schType == constant.schType_serial }"><div style="font-size:16pt;">前有效</div></c:if></div>
            <div class="start-standing">${trafficline.startStationName }</div>
            <div class="Trains-type">${cf:schTypeName(trafficline.schType) }</div>
            <div class="price">
              <span>￥</span> ${trafficline.price }
            </div>
            <div class="arrive-standing">${trafficline.arriveStationName }</div>
            <c:if test="${trafficline.schType == constant.schType_fixed }">
              <c:if test="${trafficline.surplusNum != '0' }">
                <div class="votes">余票${trafficline.surplusNum }&nbsp;免票${trafficline.freeNum }</div>
              </c:if>
              <c:if test="${trafficline.surplusNum == '0' }">
                <div class="votes">已售完</div>
              </c:if>
            </c:if>
            <c:if test="${trafficline.schType == constant.schType_serial }">
              <div class="votes">余票充足</div>
            </c:if>
            <input type="hidden" name="regBusNo" value="${trafficline.regBusNo }"/>
            <input type="hidden" name="regBusNoFoid" value="${trafficline.regBusNoFoid }"/>
            <input type="hidden" name="price" value="${trafficline.price }" />
            <input type="hidden" name="halfPrice" value="${trafficline.halfPrice }"/>
            <input type="hidden" name="startStationId" value="${trafficline.startStationId }"/>
            <input type="hidden" name="arriveStationId" value="${trafficline.arriveStationId }"/>
            <input type="hidden" name="leaveDate" value="${trafficline.leaveDate }"/>
            <input type="hidden" name="leaveTime" value="${trafficline.leaveTime }"/>
            <input type="hidden" name="fullStationCharge" value="${trafficline.fullStationCharge }" />
            <input type="hidden" name="halfStationCharge" value="${trafficline.halfStationCharge }"/>
            <input type="hidden" name="schType" value="${trafficline.schType }"/>
            <input type="hidden" name="busTypeName" value="${trafficline.busTypeName }" />
            <input type="hidden" name="startStationName" value="${trafficline.startStationName }"/>
            <input type="hidden" name="arriveStationName" value="${trafficline.arriveStationName }"/>
            <input type="hidden" name="ticketQueryURL" value="${ctx}/trafficlinenc/enquiry.do?arriveCityId=${ticketQueryParam.arriveCityId}&destination=${ticketQueryParam.destination }&arriveStationId=${ticketQueryParam.arriveStationId }&leaveDate=${ticketQueryParam.leaveDate}"/>
            <input type="hidden" name="fullServicePrice" value="${trafficline.fullServicePrice }"/>
            <input type="hidden" name="halfServicePrice" value="${trafficline.halfServicePrice }"/>
            <input type="hidden" name="lineTypeId" value="${trafficline.lineTypeId }"/>
            <input type="hidden" name="surplusfreeNum" value="${trafficline.freeNum }"/>
            <input type="hidden" name="endStationId" value="${trafficline.endStationId }"/>
            <input type="hidden" name="fullInsurance" value="${trafficline.fullInsurance }"/>
            <input type="hidden" name="halfInsurance" value="${trafficline.halfInsurance }"/>
            <input type="hidden" name="donatedInsurance" value="${trafficline.donatedInsurance}"/>
          </form>
        </li>
      </c:forEach>
      </ul>
    </div>
    <c:if test="${empty trafficLineList}">
       <div style="padding-top:15px;font-size:22pt;">
                 没有符合条件的记录！
       </div>
    </c:if>
  </div>
  <!-- 重置密码弹出层 -->
  <div id="Layer-thickness" style="display:none;width: 80%;height:auto;" class="popdiv">
    <div id="Layer-thickness-concent" style="height:auto;"></div>
    <div id="Layer-thickness-button">
        <a style="" href="javascript:void(0);" id="buyTickectBtn"><span style="border-right: 1px solid #e1e1e1;">购票</span></a>
        <a href="javascript:void(0);" id="confirmBtn"> <span>关闭</span></a>
    </div>
  </div>
  <!-- 弹出层背景 -->
  <div id="divbg" style="display: none;">
  </div>
  
  <%@ include file="/WEB-INF/views/popup_alert.jsp"%>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <!-- mergeTo:${ctx}/js/custom.min.js?ver=${custom_min_version} -->
  <script type="text/javascript" src="${ctx}/js/custom.js?ver=${custom_version}"></script>
  <!-- mergeTo -->
  <script type="text/javascript">
  $(document).ready(function() {
	  var constant_schTypeFixed = "${constant.schType_fixed}";// 固定班次常量
	  var nowtime = new Date("${now}");
	  var nowtimeHM = nowtime.getHours() + ":" + nowtime.getMinutes();
	  var expiryTime = new Date(nowtime.getTime() + 24*60*60*1000); //提前24小时停止售票
	  var stopSaleTime = "17:30"; // 发车时间前一天17:30停止售票
	  var li = null;
	  //关闭弹出窗
	  $("#confirmBtn").bind("click", function(e) {
          closePopDiv();
          return false;
      });
      //满足提前24小时，提交班次信息
      $("#buyTickectBtn").on("click", function(e) {
          var leaveDate = li.find("input[name=leaveDate]").val();// 发车日期
          var leaveTime = li.find("input[name=leaveTime]").val();// 发车时间
          var schType = li.find("input[name=schType]").val(); // 班次类别
          var surplusNum = li.attr("surplusNum"); // 余票数
          var departureTimestr = leaveDate + " " + leaveTime;
          var departureTime = new Date(departureTimestr.replace("-", "/").replace("-", "/"));
          var days = Math.floor((departureTime.getTime() - nowtime.getTime()) / (24*60*60*1000));

          closePopDiv();
          if(departureTime < expiryTime){
              openAlert("省际班线需提前24小时购票，请重新选择！");
              return false;
          } else if (schType == constant_schTypeFixed && surplusNum == '0') {
        	  openAlert("您所选班次车票已售完，请选择其他班次！");
        	  return false;
          }
          li.children().submit();
      });
	  //点击一个班次，弹出它的详细信息
      $("li").on("click", function(e) {
    	  li = $(this);
    	  var leaveTime = $(this).attr("leaveTime");
    	  var startStationName = $(this).attr("startStationName");
    	  var schType = $(this).attr("schType");
    	  var price = $(this).attr("price");
    	  var arriveStationName = $(this).attr("arriveStationName");
    	  var surplusNum = $(this).attr("surplusNum");
    	  var freeNum = $(this).attr("freeNum");
    	  var busTypeName = $(this).attr("busTypeName");
    	  var passStationName = $(this).attr("passStationName");
    	  var endStationName = $(this).attr("endStationName");

    	  var msg = "<ul><li><div class='ticket_detail_name'>发车时间:</div>" + "<div class='ticket_detail_value'>" + leaveTime + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>出发站:</div>" + "<div class='ticket_detail_value'>" + startStationName + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>班次类型:</div>" + "<div class='ticket_detail_value'>" + schType + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>全票价:</div>" + "<div class='ticket_detail_value'>￥" + price + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>到达站:</div>" + "<div class='ticket_detail_value'>" + arriveStationName + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>剩余票数:</div>" + "<div class='ticket_detail_value'>" + surplusNum + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>剩余免票数:</div>" + "<div class='ticket_detail_value'>" + freeNum + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>车型:</div>" + "<div class='ticket_detail_value'>" + busTypeName + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>途径地:</div>" + "<div class='ticket_detail_value'>" + passStationName + "</div></li>" + 
    	            "<li><div class='ticket_detail_name'>终点站:</div>" + "<div class='ticket_detail_value'>" + endStationName + "</div></li></ul>";
    	  openPopDiv(msg); //弹出车次详细信息
      });
      // 把已过发车时间的条目置灰
      $("li").each(function(i, obj) {
          var leaveDate = $(obj).find("input[name=leaveDate]").val();// 发车日期
          var leaveTime = $(obj).find("input[name=leaveTime]").val();// 发车时间
          var departureTimestr = leaveDate + " " + leaveTime;
          var departureTime = new Date(departureTimestr.replace("-", "/").replace("-", "/"));
          var days = Math.floor((departureTime.getTime() - nowtime.getTime()) / (24*60*60*1000));

          if (departureTime < expiryTime) {
        	  $(obj).css("background-color","rgb(239, 238, 238)");
              $(obj).find("div[class='price']").after("<div class='stoppedSaleHint'>已停售</div>");
              $(obj).find("div[class='arrive-standing']").css("margin-left","10%");
          }
      });
  });
  /* 打开弹出层消息提示 */
  function openPopDiv(msg) {
      var popDiv = $(".popdiv");
      var popbg = $("#divbg");
      var popContent = $("#Layer-thickness-concent");
      popContent.html(msg);
      //获取弹出窗口的长度和宽度
      var showdivwidth = popDiv.width();
      var showdivheight = popDiv.height();
      var iTop=($(window).height()-showdivheight)/2; 
      var iLeft=($(window).width()-showdivwidth)/2; 
      popDiv.css({left:iLeft,top:iTop});

      popbg.css({display:"block"});
      popDiv.css({display:"block"});
  }
  /* 关闭弹出层 */
  function closePopDiv(){
      $(".popdiv").css({display:"none"});
      $("#divbg").css({display:"none"});
  }
  </script>
</body>
</html>
